<template>
  <view class="card" :style="{backgroundColor: backColor}">
    <view class="structure" :style="{ padding: padding + 'rpx' }">
      <view class="head" v-if="title || head || subtitle || showArrow">
        <view class="title">
          <view class="titlename">{{ title }}</view>
          <view class="titlehead">{{ head }}</view>
        </view>
        <view class="subtitle" @click="goToSubtitleUrl">
          <view class="text" :style="'color:' + subtitleColor">{{ subtitle }}</view>
          <uni-icons type="forward" size="14" :color="subtitleColor" v-if="showArrow" class="uni-icons" ></uni-icons>
        </view>
      </view>
      <view class="body" :style="{ paddingTop: showGap ? '20rpx' : '0' }" v-if="showBody" >
      <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "CardCom",
  props: {
    title: {
      type: String,
      default: ''
    },
    head: {
      type: String,
      default: ''
    },
    subtitle: {
      type: String,
      default: ''
    },
    subtitleColor: {
      type: String,
      default: '#999999'
    },
    subtitleUrl: {
      type: String,
      default: ''
    },
    showArrow: {
      type: Boolean,
      default: false
    },
    showGap: {
      type: Boolean,
      default: true
    },
    showBody: {
      type: Boolean,
      default: true
    },
    padding: {
      type: Number,
      default: 20
    },
    backColor: {
      type: String,
      default: '#ffffff'
    }
  },
  methods: {
    goToSubtitleUrl() {
      uni.navigateTo({url: this.subtitleUrl})
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  border: 1px #F5F5F5 solid;
  border-radius: 20rpx;
  margin: 20rpx auto;
  .structure {
    .head {
      display: flex;
      justify-content: space-between;
      .title {
        display: flex;
        font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
        .titlename {
          margin:0 30rpx 0 14rpx;
        }
        .titlehead {
          color: #666666;
        }
      }
      .subtitle {
        display: flex;
        font-size: 28rpx;
        color: #999999;
      }
    }
    .body {

    }
  }
}
.uni-icons{
	margin-right: 10rpx;
}
</style>
